<!DOCTYPE html>
<html>

<head>
  <title>
    CSS | animation-fill-mode Property
  </title>
  <!-- none|forwards|backwards|both| -->
  <!-- none     不在开头 也不再结尾,使用动画结束后使用默认样式  -->
  <!-- forwards ,动画结束后,再结尾使用 100%样式  -->
  <!-- backwards ,在动画开头, 使用动画  0%样式  -->
  <!-- both ,  在动画开头, 使用动画  0%样式 ,动画结束,再结尾使用 100%样式 -->
   <style>
    h2 {
      width: 400px;
      background-color: orange;
      animation-name: text;
      animation-duration: 3s;
    }

    #one {
      animation-fill-mode: none;
      /* animation-delay: 2s; 可以看到开头的样式 */
    }

    #two {
      animation-fill-mode: forwards;
      /* animation-delay: 2s;可以看到开头的样式 */
    }

    #three {
      animation-fill-mode: backwards;
      animation-delay: 2s;
    }

    #four {
      animation-fill-mode: both;
      animation-delay: 2s;
    }

    @keyframes text {
      from {
        margin-left: 0%;
        background-color: #aaaaaa;
      }

      to {
        margin-left: 60%;
        background-color: #008000;
      }
    }
  </style>
</head>

<body>
  <h1>GeeksforGeeks</h1>
  <p>A computer science portal for geeks</p>
  <h2 id="one">none</h2>
  <h2 id="two">forwards</h2>
  <h2 id="three">backwards</h2>
  <h2 id="four">both</h2>
</body>

</html>